<template>
  <a-card style="width: 100%">
    <!-- 搜索 -->
    <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
      style="margin: 30px 0; background: #fff" expandFixed="true">
      <a-form-item name="pr" label="名称">
        <a-input v-model:value="values.text" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item name="ar" label="状态">
        <a-select v-model:value="values.creas" style="width: 120px">
          <a-select-option v-for="(item, ind) in zt" :key="ind" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item expandFixed="right">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button @click="() => toset()">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <a-card style="width: 100%">
      <a-button type="primary">+新建</a-button>
    </a-card>

    <a-card style="width: 100%">
      <div class="knowbox">
        <div v-for="(item, ind) in knowList" :key="ind">
          <img :src="item.cover" alt="">
          <p>{{ item.title }}</p>
          <div class="imgbtom">
            <!-- 编辑 -->
            <a-button>
              <svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor"
                aria-hidden="true">
                <path
                  d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z">
                </path>
              </svg>
            </a-button>
            <a-tooltip placement="top">
              <template #title>
                <span v-if="item.status == 'publish'">设为草稿</span>
                <span v-else>发布线上</span>
              </template>
              <a-button @click="() => editstatusa(item)">
                <!-- 状态 -->
                <svg v-if="item.status == 'publish'" viewBox="64 64 896 896" focusable="false" data-icon="cloud-download"
                  width="1em" height="1em" fill="currentColor" aria-hidden="true">
                  <path
                    d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z">
                  </path>
                  <path
                    d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z">
                  </path>
                </svg>
                <svg v-else viewBox="64 64 896 896" focusable="false" data-icon="cloud-upload" width="1em" height="1em"
                  fill="currentColor" aria-hidden="true">
                  <path
                    d="M518.3 459a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z">
                  </path>
                  <path
                    d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z">
                  </path>
                </svg>
              </a-button>
            </a-tooltip>

            <!-- 设置 -->
            <a-button @click="() => showDrawer(item)">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="setting" width="1em" height="1em"
                fill="currentColor" aria-hidden="true">
                <path
                  d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z">
                </path>
              </svg>
            </a-button>
            <!-- 删除 -->
            <a-button @click="() => toremove(item)">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="delete" width="1em" height="1em"
                fill="currentColor" aria-hidden="true">
                <path
                  d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z">
                </path>
              </svg>
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
    <a-card>
      <a-pagination v-model:current="current" v-model:page-size="pageSize" :page-size-options="pageSizeOptions"
        :total="11" show-size-changer @showSizeChange="onShowSizeChange" @change="handelchange">
        <template #buildOptionText="props">
          <span v-if="props.value !== total">{{ props.value }}条/页</span>
          <span v-else>全部</span>
        </template>
      </a-pagination>
    </a-card>
  </a-card>
  <!-- 抽屉 -->
  <a-drawer v-model:visible="visible" class="custom-class" title="更新知识库" placement="right" width="600"
    @after-visible-change="afterVisibleChange">

    <!-- 设置 -->
    <a-form name="customized_form" layout="inline" :model="editvalue" style="margin: 30px 0; background: #fff"
      expandFixed="true">
      <!-- 名称 -->
      <div class="form_item">
        <a-form-item name="pr" label="名称">
          <a-input v-model:value="editvalue.title" placeholder="请输入名称" />
        </a-form-item>
      </div>
      <!-- 描述 -->
      <div class="form_item">
        <a-form-item name="ar" label="描述">
          <textarea v-model="editvalue.summary"></textarea>
        </a-form-item>
      </div>
      <!-- 评论 -->
      <div class="form_item">
        <a-form-item label="评论">
          <a-switch v-model:checked="editvalue.isCommentable" />
        </a-form-item>
      </div>
      <!-- 封面 -->
      <div class="form_item">
        <a-form-item label="封面">

          <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" @change="handleChange"
            @drop="handleDrop" :customRequest="setfile"  :showUploadList="false">
            <div v-if="editvalue.cover == ''">
              <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
              <p class="ant-upload-hint">文件将上传到OSS,如未配置请先配置</p>
            </div>
            <img v-else :src="editvalue.cover" class="imgsa" alt="">
          </a-upload-dragger>

          <a-input v-model:value="editvalue.cover" placeholder="请输入名称" />
        </a-form-item>
      </div>
      <!-- 按钮 -->
      <div class="form_item">
        <a-form-item>
          <a-space>
            <a-button @click="() => showDrawers()">选择文件</a-button>
            <a-button @click="yichu">移除</a-button>
          </a-space>
        </a-form-item>
      </div>
    </a-form>
    <div style="position: absolute;
                             bottom: 0px; width: 100%;
                              border-top: 1px solid rgb(232, 232, 232); 
                              padding: 10px 16px; text-align: right; left: 0px; 
                              background: rgb(255, 255, 255); border-radius: 0px 0px 4px 4px;">
      <a-space>
        <a-button>取消</a-button>
        <a-button type="primary" @click="handeledit">更新</a-button>
      </a-space>
    </div>
  </a-drawer>
  <!-- 抽屉2.0 -->
  <a-drawer v-model:visible="visibles" class="custom-class" title="文件选择" placement="right" width="800"
    @after-visible-change="afterVisibleChanges">
    <a-card style="width: 100%">
      <!-- 搜索 -->
      <a-form name="customized_form_controls" layout="inline" :model="file_values" @finish="onFinishe"
        style="margin: 30px 0; background: #fff" expandFixed="true">
        <!-- 文件名称输入框 -->
        <a-form-item name="price" label="文件名称">
          <a-input v-model:value="file_values.title" placeholder="请输入标题" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="price" label="文件类型">
          <a-input v-model:value="file_values.types" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item expandFixed="right">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="() => toset()">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <br />
    <a-card style="width: 100%">
      <div class="imgs_box">
        <div v-for="(item, ind) in fileLists" :key="ind"
        @click="()=>editurl(item.url)">
          <img :src="item.url" alt="">
          <p style="font-weight: bold;">{{ item.originalname }}</p>
          <p style="font-size: 12px;">上传于：{{ item.createAt }}</p>
        </div>
      </div>
    </a-card>
    <a-card style="width: 100%">
      <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="totals"
        :page-size-options="pageSizeOptionse" show-size-changer @showSizeChange="onShowSizeChangee" @change="pageChagee" />
    </a-card>

  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useFiles } from "../../store/files"

import { useKnowledge } from "../../store/knowledge";
const knowledges = useKnowledge();
const { knowList, total } = storeToRefs(knowledges)
const ufiles = useFiles();
let { cover, fileLists,totals } = storeToRefs(ufiles)
//初始化页面数据
localStorage.removeItem("searchobj");
//设置一个点击搜索时的开关
let flag = false;
//定义分页数据
const pageSizeOptions = ref<string[]>(['8', '12', '16', '20', '24']);
const current = ref(1);
const pageSize = ref(8);
//页面初始化获取数据
knowledges.getknow({ page: current.value, pageSize: pageSize.value });

//页面展示条数发生变化
const onShowSizeChange = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes)
  current.value = 1
  pageSize.value = pageSizes
  flag = false;
};
//页面分页页码发生改变
const handelchange = (obj: any) => {
  current.value = obj;
  searchs()
}


//定义搜索框的初始数据
const values = reactive({
  text: "",
  creas: "",
});

//定义设置页输入框的值
const editvalue = reactive({
  title: "",
  summary: "",
  isCommentable: false,
  cover: "",
})
let ids = ""



//重置
const toset = () => {
  location.reload()
}
//状态
let zt = [
  { label: "已发布", value: "publish" },
  { label: "草稿", value: "draft" },
];
//点击搜索获取表单数据
const onFinish = () => {
  console.log(values, "values")
  flag = true;
  searchs()
}

//封装一个模糊搜索的方法
let searchs = () => {
  let obj = {};
  //判断搜索按钮是否点击
  if (flag) {
    current.value = 1,
      pageSize.value = 12
    obj = {
      page: current.value,
      pageSize: pageSize.value
    }
  } else {
    //不存在点击 或者搜索框的值发生了某种意外的改变
    obj = JSON.parse(localStorage.getItem("searchobj") || '{}')
    obj = {
      ...obj,
      page: current.value,
      pageSize: pageSize.value
    }
  }
  if (values.text != "") {
    obj = { ...obj, title: values.text }
  }
  if (values.creas != "") {
    obj = { ...obj, status: values.creas }
  }
  // console.log(obj)
  localStorage.setItem("searchobj", JSON.stringify(obj))
  knowledges.getknow(obj)
}
//删除单个
const toremove = (val: any) => {
  knowledges.removeknow(val.id)
}
//点击更改状态
const editstatusa = (val: any) => {
  let obj = {
    id: val.id,
    status: val.status == 'publish' ? 'draft' : 'publish'
  }
  knowledges.editstatus(obj)
}
//抽屉
const visible = ref<boolean>(false);

const afterVisibleChange = (bool: boolean) => {
  console.log('visible', bool);
};

const showDrawer = (val: any) => {
  editvalue.title = val.title
  editvalue.summary = val.summary
  editvalue.isCommentable = val.isCommentable
  editvalue.cover = val.cover
  ids = val.id

  visible.value = true;
};
const yichu = () => {
  editvalue.cover = ""
}

//上传
const handleChange = async (info: any) => {
  console.log(info.file.originFileObj, "info")
  ufiles.uploadfile(info.file.originFileObj)

};//自定义上传啊
const setfile = (v: any) => {
  // console.log(v, "set file")
}
let fileList = ref([]),
  handleDrop = (e: DragEvent) => {
    console.log(e);
  };

//更新
const handeledit = () => {
 let objs = {...editvalue};

knowledges.editknow(objs,ids)
visible.value = false;
}
//监听是否上传到数据库
watch(cover, (newval) => {
  editvalue.cover = newval
})

//抽屉2.0
const visibles = ref<boolean>(false);

const afterVisibleChanges = (bool: boolean) => {
  console.log('visible', bool);
};

const showDrawers = () => {
  visibles.value = true;
    //初始化页面数据
    localStorage.removeItem("searchobj")
};

const editurl = (val:any) =>{
  // console.log(val,"cover")
  editvalue.cover = val
  visibles.value = false;
}

 //定义搜索框的初始数据
 const file_values = reactive({
    title: "",
    types: ""
  });

  let file_current = ref(1);
  let file_pageSize = ref(8);
  const pageSizeOptionse = ref<string[]>(['8', '12', '16', '20', '24']);

  let file_flag = false;
  //文件数据
  let fileitem = {}
  //初始化获取数据
  ufiles.getsearchfiles({ page: file_current.value, pageSize: file_pageSize.value })
  //切换分页条数
  const onShowSizeChangee = (currents: number, pageSizes: number) => {
    console.log(currents, pageSizes, "页码，条数");
    file_current.value = 1
    file_pageSize.value = pageSizes;
  };
  //切换页数
  const pageChagee = (page: number, pageSize: number) => {
    file_current.value = page;
    file_flag = false;
    searche()
  }

 


  //点击搜索获取表单数据
  const onFinishe = () => {
    //点击模糊搜索
    console.log(file_values, "values")
    file_flag = true;
    searche()
  }
  //封装一个模糊搜索的方法
  const searche = () => {
    let obj = {};
    if (file_flag) {
      file_current.value = 1,
        file_pageSize.value = 12
      obj = {
        page: file_current.value,
        pageSize: file_pageSize.value
      }
    } else {
      obj = JSON.parse(localStorage.getItem("searchobj") || "{}")
      obj = {
        ...obj,
        page: file_current.value,
        pageSize: file_pageSize.value
      }
    }
    if (file_values.title != "") {
      obj = { ...obj, originalname: file_values.title }
    }
    if (file_values.types != "") {
      obj = { ...obj, type: file_values.types }
    }

    ufiles.getsearchfiles(obj)
}
</script>

<style lang="scss">
.knowbox {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 25%;
    padding: 10px;
    height: 240px;

    >img {
      width: 100%;
      height: 160px;
    }
  }
}

.imgbtom {
  display: flex;
  justify-content: space-between;
}

.ant-upload.ant-upload-drag {
  height: 280px !important;
}

.imgsa {
  width: 100%;
  height: 260px;
  position: absolute;
  left: 0;
  top: 10px;
}

.form_item {
  width: 100%;
}
</style>